<template>
  <!-- 添加和搜索角色 -->
  <div class="seach">
    <el-input v-model="obj.query" placeholder="输入用户名" />
    <el-button type="success" plain @click="seachUser">搜索角色</el-button>
    <el-button type="success" plain @click="addUserBox = true">添加角色</el-button>
  </div>

  <!-- 角色数据表格 -->
  <el-table :data="rightList" border style="width: 100%">
    <!--  tyep index 额外添加序号 -->
    <el-table-column type="expand">
      <template #default="scope">
        <el-row v-for="firstChildren in scope.row.children" :key="firstChildren.id">
          <el-col :span="4">
            <el-tag closable @close="deleteRight(scope.row, firstChildren.id)">{{
              firstChildren.authName
            }}</el-tag>
            <i class="el-icon-arrow-right" v-if="firstChildren.children.length !== 0"></i>
          </el-col>
          <el-col :span="20">
            <el-row v-for="secondChildren in firstChildren.children" :key="secondChildren.id">
              <el-col :span="4">
                <el-tag
                  closable
                  type="success"
                  @close="deleteRight(scope.row, secondChildren.id)"
                  >{{ secondChildren.authName }}</el-tag
                >
                <i class="el-icon-arrow-right" v-if="secondChildren.children.length !== 0"></i>
              </el-col>
              <el-col :span="20">
                <el-tag
                  closable
                  type="warning"
                  v-for="thirdChildren in secondChildren.children"
                  :key="thirdChildren.id"
                  @close="deleteRight(scope.row, thirdChildren.id)"
                >
                  {{ thirdChildren.authName }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="scope.row.children.length === 0">
          <el-col :span="24">该角色没有分配权限，请前往分配！</el-col>
        </el-row>
      </template>
    </el-table-column>

    <el-table-column prop="id" label="角色名称"> </el-table-column>
    <el-table-column prop="roleName" label="角色名称"> </el-table-column>

    <el-table-column prop="roleDesc" label="描述"> </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-tooltip content="分配权限" placement="top">
          <el-button type="primary" :icon="Edit" plain @click="showEditRoles(scope.$index,scope.row)" />
        </el-tooltip>
        <el-tooltip content="角色修改" placement="top">
          <el-button type="success" :icon="Setting" plain />
        </el-tooltip>
        <el-tooltip content="角色删除" placement="top">
          <el-button type="danger" :icon="Delete" plain />
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分配权限的弹窗 -->
  <el-dialog v-model="dialogVisibleRole" title="Tips" width="30%" :before-close="handleClose">
    <el-tree
      ref="treeRef"
      :data="allRightsList"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
      :default-checked-keys="selectedRights"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleRole = false">取消</el-button>
        <el-button type="primary" @click="editRights"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getRolesListApi } from '../../api/userList'
import { deleteRightApi, getRightListApi ,editRolesRightListApi} from '../../api/rights'
import { Delete, Edit, Setting } from '@element-plus/icons-vue'

const rightList = ref([])//角色列表
// 获取角色列表
const getRolesList = async () => {
  const res = await getRolesListApi()
  rightList.value = res.data
}

onMounted(() => {
  getRolesList()
})
// 默认已经选中的权限
const selectedRights = ref([])

const checkNode = (node, arr) => {
  if (!node.children) {
    return arr.push(node.id)
  }
  node.children.forEach((item) => {
    return checkNode(item, arr)
  })
}
// 删除对应权限
const deleteRight = async (data, id) => {
  const res = await deleteRightApi({ data, id })
  if (res.meta.status == 200) {
    data.children = res.data
  }
}
const dialogVisibleRole = ref(false)//控制分配权限的弹窗
const allRightsList = ref([])//所有选择的节点组成的数组
const roleid=ref('')//当前点击的角色id
// 点击编辑时执行的函数,分配权限
const showEditRoles = async (index,row) => {
  const res = await getRightListApi({ type: 'tree' })
  
  if (res.meta.status == 200) {
    allRightsList.value = res.data
  }
  roleid.value=row.id
  dialogVisibleRole.value = true
  checkNode(row,selectedRights.value)
}
// 默认的渲染属性
const defaultProps = {
  children: 'children',
  label: 'authName'
}
const treeRef = ref(null)//树形
// 点击确认,修改角色权限
const editRights =async () => {
  const CheckedKeys=treeRef.value.getCheckedKeys(false)
  const tHalfCheckedKeys=treeRef.value.getHalfCheckedKeys(false)

  const all=[...CheckedKeys,...tHalfCheckedKeys]
  console.log(all);
  const rightsStr=all.join(',')
  console.log('我是权限转换成字符串',rightsStr);
  const res = await editRolesRightListApi({roleId:roleid.value,rids:rightsStr})
  if(res.meta.status==200){
    getRolesList()
  }
  dialogVisibleRole.value = false
}
// 搜索框的值
const obj = reactive({
  query: ''
})
// const 
</script>

<style lang="scss" scoped>
.seach {
  display: flex;
  .el-input {
    width: 200px;
  }
}
</style>
